<template>
	<view class="work-container">
		<view class="rljs-box">
			<view class="rljs-img" v-if="type == 2">
				<upload @urlArr="bkAddImg"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="form" label-width="250rpx">
					<uni-forms-item :label="$t('control:surveillanceDevice')" required name="devicesTree">
						<view @click="handleDevicesOpen" class="sbBox">
							{{ nodeListCopy }}
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceName')" required name="monitorName">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="form.monitorName"
							:placeholder="$t('control:pleaseEnter')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceTimeType')" required name="monitorTimeType">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: this.$t('warn:permanent'), value: 0 },
							{ text: this.$t('search:oneDay'), value: 1 },
							{ text: this.$t('search:threeDays'), value: 3 },
							{ text: this.$t('search:oneWeek'), value: 7 },
							{ text: this.$t('search:oneMonth'), value: 30 },
							{ text: this.$t('search:custom'), value: 19 }
						]" v-model="form.monitorTimeType" @change='changeMonitorTime'>
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceEndTime')" required name="monitorTimeE">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.monitorTimeE"
							:disabled="form.monitorTimeType !== 19" />
					</uni-forms-item>
					<uni-forms-item :label="$t('control:type')" required name="radioType">
						<uni-data-checkbox v-model="form.radioType" :localdata="[
							{ text: this.$t('control:librarySurveillance'), value: '-1' },
							{ text: this.$t('control:plateSurveillance'), value: '17' }
						]">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item :label="$t('warn:vehicleLibrary')" required name="groupIds"
						v-if="form.radioType == '-1' ? true : false">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="dataTree"
							v-model="form.groupIds" @change="facedbIds" :map="treeChild">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:surveillanceStatus')" required name="monitorStatus">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: this.$t('control:enable'), value: 1 },
							{ text: this.$t('control:disable'), value: 2 }
						]" v-model="form.monitorStatus"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('warn:alarmLevel')" required name="monitorLevelId">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="alarmLevelList"
							v-model="form.monitorLevelId" :map="treeLevel">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('control:responder')" required name="userList">
						<view style="min-height: 72rpx;line-height: 72rpx;padding: 0 10rpx 0 20rpx;"
							@click='handlePoliceOpen'>{{ policeName }}</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:plateNumber')" required name="plateNumbers"
						v-if="form.radioType == '17'">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" @change="carValue"
							:placeholder="$t('control:pleaseEnter')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('warn:remark')" style="border: none;">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="form.remark"
							style="margin-top:6rpx;" type="textarea" :placeholder="$t('control:pleaseEnter')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="Add('valiForm')">{{ $t('control:submit') }}</button>
			</view>
		</view>

		<devicesTree ref='devicesTree' @onOk="setDevides" />
		<policeTree ref='policeTree' @onOk="setPolice" />
	</view>
</template>

<script>
import {
	CarAdd,
	dispLevel,
	getPoliceman,
	CarTree
} from '@/api/listAdd.js'
import {
	DBFace
} from "@/api/rljc.js"
import {
	getFaceDetails
} from "@/api/control/index.js"
import {
	getOrgList,
	getUserList
} from "@/api/manage/index.js"
import {
	getAlarmLevel
} from '@/api/warning/index.js'
import upload from "@/components/upload/index.vue"
import LyTree from '@/components/ly-tree/ly-tree.vue'
import devicesTree from '@/components/devicesTree/devicesTree.vue'
import policeTree from '@/components/policeTree/policeTree.vue'

export default {
	components: {
		upload,
		LyTree,
		devicesTree,
		policeTree
	},
	data() {
		return {
			tabbar: true,
			// 处警人开始
			orgList: [],
			// showDialog: false,
			data: [],
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			expandOnCheckNode: false, // 是否展开选中的节点
			// 处警人结束
			index: 1,
			type: 1,
			// form: {
			// 	forever: true, //布控周期 true永久 false非永久
			// 	groupIds: [], //车辆库
			// 	monitorLevelId: 3, //报警等级
			// 	monitorName: "", //布控名称
			// 	monitorStatus: "1", //布控状态 1启用 2停用
			// 	monitorTimeB: "", //周期开始时间
			// 	monitorTimeE: "", //周期结束时间
			// 	monitorTimeType: 0, //布控周期 0永久，19,非永久
			// 	monitorType: "", //布控类型 7车辆布控 9单车牌号码布控
			// 	nodeList: [], //设备
			// 	policeIds: [], //处警人
			// 	remark: "",
			// },
			form: {
				monitorName: '',
				monitorTimeType: 19,
				monitorTimeE: '',
				devicesTree: [],
				radioType: '-1',
				groupIds: [],
				monitorStatus: 1,
				monitorLevelId: '',
				userList: [],
				remark: ''
			},
			nodeListCopy: this.$t('search:pleaseSelect'),
			policeName: this.$t('search:pleaseSelect'), //处警人名称
			policeNameCopy: "",
			//布控状态
			// controlStatusList: [{
			// 		text: "启用",
			// 		value: "1"
			// 	},
			// 	{
			// 		text: "停用",
			// 		value: "2"
			// 	}
			// ],
			policemanList: [], //处警人
			monitorType: [
				{ text: this.$t('control:vehicleSurveillance'), value: 7 },
				{ text: this.$t('control:singlePlateSurveillance'), value: 9 }
			],
			alarmLevelList: [],
			treeLevel: {
				text: "name",
				value: "monitorLevelId",
			},
			dataTree: [], //人像库list
			// 下拉框形态赋值
			treeChild: {
				text: "name",
				value: "vehicledbId",
			},
			// 校验规则
			rules: {
				nodeList: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:deviceRequired')
					}]
				},
				groupIds: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:vehicleLibraryRequired')
					}]
				},
				monitorName: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceNameRequired')
					}]
				},
				monitorType: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceTypeRequired')
					}]
				},
				level: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:alarmLevelRequired')
					}]
				},
				userList: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:responderRequired')
					}]
				},
				monitorStatus: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:surveillanceStatusRequired')
					}]
				},
				plateNumbers: {
					rules: [{
						required: true,
						errorMessage: this.$t('control:plateNumberRequired')
					}]
				},
			},
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight;
			}
		});
		uni.onWindowResize((res) => {
			if (res.size.windowHeight < this.windowHeight) {
				this.tabbar = false
			} else {
				this.tabbar = true
			}
		})
	},
	onShow() {
		// var userName = localStorage.getItem("userName")
		// var userId = localStorage.getItem("userId")
		// this.policeName = userName
		// this.form.policeIds = [userId]
		this.levelT()
		this.vehicleDB()
	},
	methods: {
		showTabbar() {
			this.tabbar = true;
		},
		hideTabbar() {
			this.tabbar = false;
		},
		// 处警人开始
		initOrg() {
			let param = {
				"dataType": 0
			}
			getOrgList(param).then(res => {
				if (res.code = "00000000") {
					this.orgList = res.data
					if (this.orgList != null && this.orgList.length > 0) {
						for (let i = 0; i < this.orgList.length; i++) {
							this.orgList[i].id = this.orgList[i].orgId
							this.orgList[i].label = this.orgList[i].orgCname
							this.orgList[i].type = 1
						}
						this.initUser()
						this.changeArrToTree()
					}
				}
			})
		},
		initUser() {
			let param = {
				"pageSize": 999999
			}
			getUserList(param).then(res => {
				if (res.code = "00000000") {
					let userList = res.data.datas
					for (let i = 0; i < this.orgList.length; i++) {
						let userArr = []
						for (let j = 0; j < userList.length; j++) {
							if (this.orgList[i].orgId == userList[j].orgId) {
								userList[j].id = userList[j].userId
								userList[j].label = userList[j].name
								userList[j].type = 2
								if (this.orgList[i].children == null) {
									this.orgList[i].children = []
								}
								this.orgList[i].children.push(userList[j])
							}
						}
					}
				}
			})
		},
		changeArrToTree() {
			let data = this.orgList
			let result = []
			if (!Array.isArray(data)) {
				return result
			}
			data.forEach(item => {
				delete item.children;
			});
			let map = {};
			data.forEach(item => {
				map[item.orgId] = item;
			});
			data.forEach(item => {
				let parent = map[item.parentId];
				if (parent) {
					(parent.children || (parent.children = [])).push(item);
				} else {
					result.push(item);
				}
			});
			this.data = result
		},
		levelT() {
			// dispLevel({
			// 	currentPage: "1",
			// 	pageSize: "10"
			// }).then(res => {
			// 	this.level = res.data.datas
			// })
			getAlarmLevel({
				currentPage: 1,
				pageSize: 9999
			}).then(res => {
				this.alarmLevelList = res.data.datas
			})
		},
		// 车辆库
		facedbIds() {
			let arr = []
			arr.push(this.form.groupIds)
			this.form.groupIds = arr
		},
		foreverS(e) {
			if (e.detail.value == 0) {
				this.form.forever = true
			} else {
				this.form.forever = false
			}
		},
		// 车牌号
		carValue(e) {
			if (e != "" || e != null) {
				this.form.plateNumbers = [e]
			} else {
				this.form.plateNumbers = []
			}
		},
		// 人像库下拉框
		vehicleDB() {
			CarTree({
				isDelete: 1, currentPage: 1, pageSize: 9999
			}).then(res => {
				this.dataTree = res.data.datas
			})
		},
		// type清空车牌
		typeMom() {
			if (this.form.monitorType == 7) {
				delete this.form.monitorProperTies
			}
		},
		bkAddImg(e) {
			this.form.faces = [e]
		},
		Status(e) {
			if (e.detail.value == true) {
				this.form.monitorStatus = 1
			} else {
				this.form.monitorStatus = 2
			}
		},
		// 设备选择
		equipment(index) {
			uni.navigateTo({
				url: `/pages/shebei/index?type=${index}`
			})
		},
		Add(ref) {
			this.$refs[ref].validate().then(response => {
				const {
					devicesTree,
					radioType,
					monitorType,
					plateNumbers,
					...rest
				} = this.form,
					params = {
						...rest
					}
				params.devicesTree = {
					select: {
						deviceIds: devicesTree
					}
				}
				params.monitorType = radioType === '17' ? 17 : 7
				params.radioType = radioType === '-1' ? radioType : void 0
				if (radioType === '17') {
					// push_ref.current &&
					// 	push_ref.current.verify(push_data => {
					// 		params.plateNumbers = push_data?.targets ? push_data?.targets.map(item => item
					// 			.plate) : []
					// 		// operation(params)
					// 	})
					params.plateNumbers = plateNumbers
				}

				CarAdd(params).then(res => {
					if (res.code == '00000000') {
						uni.showToast({
							title: this.$t('control:submitSuccess'),
							duration: 500
						});
						uni.reLaunch({
							url: '/pages/control/list'
						})
					}
				})
			}).catch(err => {
				console.log('err', err);
			})
		},
		handleDevicesOpen() {
			this.$refs.devicesTree.open()
		},
		setDevides(id, labels) {
			this.form.devicesTree = id
			this.nodeListCopy = labels || this.$t('search:pleaseSelect')
		},
		handlePoliceOpen() {
			this.$refs.policeTree.open()
		},
		setPolice(id, labels) {
			this.form.userList = id
			this.policeName = labels
		},
		changeMonitorTime({
			detail: {
				value
			}
		}) {
			const monitorTimeType = value[0].value
			if (monitorTimeType == 0) {
				this.form.monitorTimeE = new Date('2999-12-31 23:59:59').getTime()
			} else if (monitorTimeType != 19) {
				const timestamp = new Date().getTime()
				this.form.monitorTimeE = timestamp + monitorTimeType * 24 * 60 * 60 * 1000
			}
		}
	},
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.rljs-nav {
	position: fixed;
	top: 80rpx;
	width: 750rpx;
	height: 80rpx;
	background-color: #f1f1f1;
	display: flex;
	justify-content: space-evenly;
	z-index: 50;
}

.rljs-title {
	line-height: 80rpx;
}

.active {
	line-height: 80rpx;
	color: #0081ff;
	border-bottom: 2px solid #0081ff;
}

.rljs-img {
	padding: 40rpx 0;
}

.rljs-img>>>.file-picker__box {
	position: relative;
	width: 40%;
	height: 0;
	margin: auto;
	padding-top: 40%;
	box-sizing: border-box;
}

.rljs-list {
	padding: 0rpx 60rpx;
}

.rljs-list .uni-forms-item {
	border-bottom: 1px solid #dedede;
	margin-bottom: 0rpx;
	padding: 15rpx 0;
}

.rljs-list>>>.uni-input-input {
	color: #333;
}

.rljs-list>>>.input-value-border {
	border: none;
}

.rljs-list>>>.uni-text {
	display: none;
}

.rljs-list>>>.placeholder {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date-x--border {
	border: none;
}

.rljs-list>>>.uni-icons {
	display: none;
}

.rljs-list>>>.uni-date .uni-icons {
	display: block;
}

.rljs-list>>>.is-input-border {
	border: none;
}

.rljs-list>>>.uni-easyinput__placeholder-class {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date__x-input {
	padding: 0;
}

.rljs-list>>>.uni-data-checklist .checklist-group {
	margin-top: 10rpx;
}

.btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: #fff;
}

.btn button {
	margin: 0rpx 50rpx 50rpx 50rpx;
	font-size: 30rpx;
}

.rljs-box {
	width: 750rpx;
	margin-top: 80rpx;
	padding-bottom: 200rpx;
}

.rljs-box {
	width: 750rpx;
	margin-top: 80rpx;
	padding-bottom: 200rpx;
}

.rljs-img>>>.imgClass {
	width: 250rpx;
	height: 350rpx;
	margin: 0 auto;
}

::v-deep .uni-forms-item__error {
	top: 70%;
	z-index: 50;
}

.dialog {
	height: auto;
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0;
	max-height: 99vh;
	overflow: auto;
}

.zhezhao {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.5);
	top: 0;
}

.btnQ {
	width: 750rpx;
	/* height: 50rpx; */
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;
}

.sbBox {
	width: 428rpx;
	line-height: 72rpx;
	padding: 0 10rpx 0 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>